<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }
    </style>
    <script src="../js/aniamte.js"></script>
</head>

<body>
    <div class="all" id='all'>
        <div class="screen">
            <ul>
                <li><img src="images/1.jpg" width="500" height="200" /></li>
                <li><img src="images/2.jpg" width="500" height="200" /></li>
                <li><img src="images/3.jpg" width="500" height="200" /></li>
                <li><img src="images/4.jpg" width="500" height="200" /></li>
                <li><img src="images/5.jpg" width="500" height="200" /></li>

            </ul>
        </div>
        <ol>

        </ol>
    </div>
</body>

</html>

<script>

    class Sweiper {
        constructor(ele) {
            this.el = document.querySelector(ele);
            this.oUl = this.el.children[0].children[0];
            this.oOl = this.el.children[1];
            this.imgIndex = 0;
            this.pointIndex = 0;
            this.init();
            this.mouseHander();

            this.timer = setInterval(function () {
                // 默认定时器 里的this是window 
                this.imgIndex++;
                this.pointIndex++;
                this.autoPlay();
            }.bind(this), 1500);
        }
        //初始化
        init() {
            var df = document.createDocumentFragment()
            for (let i = 0; i < this.oUl.children.length; i++) {
                let oLi = document.createElement("li");
                oLi.innerHTML = (i + 1);
                oLi.className = i == 0 ? 'current' : ''
                df.appendChild(oLi);
            }
            this.oOl.appendChild(df);
            //把一张图片克隆一张,添加到最后位置
            this.oUl.appendChild(this.oUl.children[0].cloneNode(true));
        }
        autoPlay() {
            //只做切换
            if (this.imgIndex > 5) {
                this.imgIndex = 1;
                this.oUl.style.left = "0px";
            }
            utils.animate(this.oUl, { left: -500 * this.imgIndex })
            //屎黄色的点
            if (this.pointIndex > 4) {
                this.pointIndex = 0;
            }
            //排他思想
            Array.from(this.oOl.children).forEach((item, index) => {

                item.className = (index == this.pointIndex) 
                ? 'current' : ''
            })
        }
        mouseHander() {
            this.el.onmouseenter = () => {
                clearInterval(this.timer);
            }
            this.el.onmouseleave = () => {
                this.timer = setInterval(function () {
                    // 默认定时器 里的this是window 
                    this.imgIndex++;
                    this.pointIndex++;
                    this.autoPlay();
                }.bind(this), 1500);
            }
        }
    }

    new Sweiper("#all");
</script>